import React, { useEffect, useState } from 'react'
import { Wrap } from './style'
import { Search, CheckBox } from '@kedacom/react-next'
import { ListItem, ShuttleBoxParams } from '../interface'
import { useRequest } from 'ahooks'
import { fetchGetDomain } from '@/api/sysConfig/virtualRoomConfig'
import { t } from 'i18next'

export function ShuttleBox(props: ShuttleBoxParams) {
	const parentList = props.list.map((v) => {
		return {
			...v,
			clicked: false,
		}
	})
	const [value, setValue] = useState('') // 关键字搜索
	const [listAll, setListAll] = useState<ListItem[]>([]) // 所有用户域
	const [listSelected, setListSelected] = useState<ListItem[]>(parentList) // 已选的用户域
	const [currentIndex, setCurrentIndex] = useState(0) // 当前点击的用户域的index

	const { data, loading } = useRequest(() => fetchGetDomain(value), { refreshDeps: [value] })

	useEffect(() => {
		if (data && !loading) {
			let l = data.map((v) => {
				let flag = listSelected.some((val) => val.moid === v.moid)
				return {
					...v,
					checked: flag,
					clicked: false,
				}
			})
			setListAll([...l])
		}
	}, [data, listSelected])

	/*按Ctrl点击或者shift点击*/
	function ctrlOrShift(event: React.MouseEvent) {
		if (event.ctrlKey) return 'ctrl'
		if (event.shiftKey) return 'shift'
		return ''
	}

	/** 选中的元素进入右边穿梭框 flag是否全移 */
	function toRight(flag: boolean) {
		let l = flag ? listAll : listAll.filter((v) => v.clicked) // 被选中的元素数组
		if (!l.length) return // 没有选中的用户域 -- 无事发生
		let arr: ListItem[] = [] // 被选中且不在已选中用户域中的元素
		l.forEach((v) => {
			let flag = listSelected.some((val) => val.moid === v.moid) // 判断当前用户域是否已在已选中列表中
			if (!flag) {
				arr.push({
					moid: v.moid,
					name: v.name,
					clicked: false,
					checked: false,
				})
			}
			setListSelected([...listSelected, ...arr])
		})
		// 所有的元素中本次被选中的和已在右边的 打上选中态
		let ls = listAll.map((v) => {
			let flag = l.some((val) => val.moid === v.moid) || listSelected.some((val) => val.moid === v.moid)
			return {
				moid: v.moid,
				name: v.name,
				checked: flag,
				clicked: false,
			}
		})
		setListAll([...ls])
		props.getCheckedDomain([...listSelected, ...arr])
	}

	/** 选中的元素进入左边穿梭框 flag是否全移*/
	function toLeft(flag: boolean) {
		let l = flag ? listSelected : listSelected.filter((v) => v.clicked || v.checked) // 被选中的用户域
		let ls = flag ? [] : listSelected.filter((v) => !v.clicked && !v.checked) // 未被选中的用户域

		// 取消被选中的用户域的选中状态
		listAll.forEach((v) => {
			l.forEach((val) => {
				if (val.moid === v.moid) {
					v.checked = false
				}
			})
		})
		setListAll([...listAll])
		setListSelected([...ls])
		props.getCheckedDomain([...ls])
	}

	/**
	 *  点击事件处理
	 * 	分别有ctrl + click 、 shift + click 、 click
	 */
	let clickNum = 0
	let isClick = false
	function handleClickByType(
		v: ListItem,
		i: number,
		e: React.MouseEvent,
		list: ListItem[],
		callback: (value: React.SetStateAction<ListItem[]>) => void,
		flag: boolean
	) {
		var key = ctrlOrShift(e)
		switch (key) {
			case 'ctrl':
				v.clicked = true
				callback([...list])
				break

			case 'shift':
				let max = Math.max(i, currentIndex)
				let min = Math.min(i, currentIndex)
				for (let index = min; index <= max; index++) {
					list[index].clicked = true
				}
				callback([...list])
				break

			default:
				clickNum++
				if (isClick) return
				isClick = true
				setTimeout(() => {
					if (clickNum >= 2) {
						//双击
						v.clicked = true
						callback([...list])
						flag ? toRight(false) : toLeft(false)
						clickNum = 0
					} else {
						//单击
						list.map((val) => {
							val.clicked = false
							return val
						})
						v.clicked = true
						callback([...list])
					}
					isClick = false
				}, 300)

				break
		}
		setCurrentIndex(i)
	}

	return (
		<Wrap>
			<div className="main">
				{/* 左边所有用户域 */}
				<div className="leftBox">
					<div className="title">{t('用户域')}</div>
					<div className="search">
						<Search
							maxLength={128}
							placeholder={t('请输入关键字搜索')}
							iconAlign="left"
							value={value}
							onChange={(e, v) => setValue(v)}
							onClear={() => setValue('')}
							clearable
						/>
					</div>
					<div className="list">
						{listAll.map((v, i) => {
							return (
								<div
									className={`${v.clicked ? 'clicked' : ''} list-item`}
									key={i}
									onClick={(e) => handleClickByType(v, i, e, listAll, setListAll, true)}
								>
									<div className={`${v.checked ? 'selected' : ''} icon`}></div>
									<div className="text">{v.name}</div>
								</div>
							)
						})}
					</div>
				</div>

				{/* 中间按钮 */}
				<div className="center">
					<div className="btn-box">
						<div className="toAllRight" onClick={() => toRight(true)}></div>
						<div className="toRight" onClick={() => toRight(false)}></div>
						<div className="toLeft" onClick={() => toLeft(false)}></div>
						<div className="toAllLeft" onClick={() => toLeft(true)}></div>
					</div>
				</div>

				{/* 右边已选用户域 */}
				<div className="rightBox">
					<div className="title">
						{t('已选')} {listSelected.length}
					</div>
					<div className="list">
						{listSelected.map((v, i) => {
							return (
								<div className={`${v.clicked || v.checked ? 'clicked' : ''} list-item`} key={i}>
									<CheckBox
										checked={v.checked}
										onChange={(e) => {
											listSelected[i].checked = !listSelected[i].checked
											listSelected[i].clicked = listSelected[i].checked
											setListSelected([...listSelected])
										}}
									/>
									<div
										className="text"
										onClick={(e) =>
											handleClickByType(v, i, e, listSelected, setListSelected, false)
										}
									>
										{v.name}
									</div>
								</div>
							)
						})}
					</div>
				</div>
			</div>
		</Wrap>
	)
}
